<page-header title="客户资产变动" [breadcrumb]="breadcrumb" [action-group]="false" [action-group]="false" [back]="true">
  <ng-template #breadcrumb>
    <ql-breadcrumb>
      <ql-breadcrumb-item>客户管理</ql-breadcrumb-item>
      <ql-breadcrumb-item>我的客户</ql-breadcrumb-item>
      <ql-breadcrumb-item>客户资产变动</ql-breadcrumb-item>
    </ql-breadcrumb>
  </ng-template>
</page-header>

<page-container>
  <ql-card>
    <div echarts [options]="labelOption[0]" [merge]="labelOption[1]" [loading]="loading"></div>

    <table class="table table-striped table-bordered table-hover">
      <thead style="text-align: center;font-size: 0.4em;">
        <tr>
          <th scope="col" colspan="7">
            <ql-select placeholder="选择时间范围" style="float: left">
              <ql-option *ngFor="let item of seltimes" [label]="item.label" [value]="item.value"> </ql-option>
            </ql-select>
          </th>
        </tr>
        <tr>
          <th scope="col">资产类型</th>
          <th scope="col">变动客户数</th>
          <th scope="col">变动金额</th>
          <th scope="col">资产余额</th>
        </tr>
      </thead>
      <tbody>
        <tr *ngFor="let data of changeData; let i = index" style="text-align: center;font-size: 0.3em;">
          <td>{{ data.name }}</td>
          <td>
            <a (click)="queryCustomer()">{{ data.up }} 人</a>
          </td>
          <td>
            <a (click)="queryCustomer()">￥{{ data.down }}</a>
          </td>
          <td>
            <a (click)="queryCustomer()">￥{{ data.total }}</a>
          </td>
        </tr>
      </tbody>
    </table>

    <!--<ng-template #header>-->
    <!--<ql-select placeholder="选择时间范围">-->
    <!--<ql-option *ngFor="let item of seltimes" [label]="item.label" [value]="item.value"> </ql-option>-->
    <!--</ql-select>-->
    <!--</ng-template>-->
    <!--<label-container column="4" [border]="true" labelWidth="160">-->
    <!--<label-item label="资产余额变动客户"> <a (click)="queryCustomer()">13</a></label-item>-->
    <!--<label-item label="存款余额变动客户"><a (click)="queryCustomer()">126</a></label-item>-->
    <!--<label-item label="投资理财余额变动客户"><a (click)="queryCustomer()">32</a></label-item>-->
    <!--<label-item label="贷款客户"><a (click)="queryCustomer()">9</a></label-item>-->
    <!--<label-item label="客户资产余额（万）"><a (click)="queryCustomer()">25</a></label-item>-->
    <!--<label-item label="存款余额（万）"><a (click)="queryCustomer()">500</a></label-item>-->
    <!--<label-item label="投资理财余额（万）"><a (click)="queryCustomer()">120</a></label-item>-->
    <!--<label-item label="贷款余额（万）"><a (click)="queryCustomer()">100</a></label-item>-->
    <!--</label-container>-->

    <divider></divider>

    <data-table [model]="dataassets">
      <ql-table-column model-key="code" label="客户号"> </ql-table-column>
      <ql-table-column model-key="name" label="姓名"> </ql-table-column>
      <ql-table-column model-key="level" label="等级"> </ql-table-column>
      <ql-table-column model-key="sex" label="性别"> </ql-table-column>
      <ql-table-column model-key="age" label="年龄"> </ql-table-column>
      <ql-table-column model-key="tel" label="电话"> </ql-table-column>
      <ql-table-column model-key="aum" label="AUM"> </ql-table-column>
      <ql-table-column model-key="saveye" label="存款余额"> </ql-table-column>
      <ql-table-column model-key="savebd" label="上日存款变动" width="110"> </ql-table-column>
      <ql-table-column model-key="cpnum" label="持有产品数" width="105"> </ql-table-column>
      <ql-table-column model-key="interaTime" label="互动时间"> </ql-table-column>
      <ql-table-column model-key="moneyflows" label="最近资金渠道流向" width="150"> </ql-table-column>
    </data-table>
  </ql-card>
  <!-- 查看对应客户 -->
  <ng-template #searchList>
    <ql-card>
      <data-table [model]="customerList">
        <ql-table-column model-key="ctCode" label="客户编号" width="80"> </ql-table-column>
        <ql-table-column model-key="ctName" label="客户姓名" width="80"> </ql-table-column>
        <ql-table-column model-key="ctsex" label="性别" width="80"> </ql-table-column>
        <ql-table-column model-key="ctage" label="年龄" width="80"> </ql-table-column>
        <ql-table-column model-key="ctType" label="客户类型" width="80"> </ql-table-column>
        <ql-table-column model-key="ctLevel" label="客户等级" width="80"> </ql-table-column>
        <ql-table-column model-key="ctTel" label="客户电话" width="80"> </ql-table-column>
        <ql-table-column model-key="time" label="开户时间" width="80"> </ql-table-column>
        <ql-table-column model-key="assest" label="客户资产" width="80"> </ql-table-column>
        <ql-table-column model-key="AUM" label="AUM" width="80"> </ql-table-column>
        <ql-table-column model-key="productnum" label="持有产品数" width="90"> </ql-table-column>
        <ql-table-column model-key="interaTime" label="互动时间" width="80"> </ql-table-column>
        <ql-table-column label="操作" width="80">
          <ng-template #slot let-scope="scope">
            <ql-button type="text" [routerLink]="['/customer/customer-detail']" (click)="modal.close()">详情</ql-button>
          </ng-template>
        </ql-table-column>
      </data-table>
    </ql-card>
  </ng-template>
</page-container>
